import React from 'react';
import { Layout, ConfigProvider } from 'antd';
import { menuItems, features, steps } from './data/appData';
import { ThemeProvider, useTheme } from './contexts/ThemeContext';
import Sidebar from './components/layout/Sidebar';
import HeroSection from './components/sections/HeroSection';
import FeatureSection from './components/sections/FeatureSection';
import StepsSection from './components/sections/StepsSection';
import CTASection from './components/sections/CTASection';
import AppFooter from './components/layout/AppFooter';
import FloatConsultButton from './components/ui/FloatConsultButton';
import './App.css';

const { Content } = Layout;

// 主应用内容组件
const AppContent: React.FC = () => {
  const { themeConfig } = useTheme();

  return (
    <ConfigProvider theme={themeConfig}>
      <Layout style={{ minHeight: '100vh' }}>
        {/* 侧边栏导航 */}
        <Sidebar menuItems={menuItems} />

        {/* 主内容区 */}
        <Layout style={{ marginLeft: 256 }}>
          <Content>
            <HeroSection />
            <FeatureSection features={features} />
            <StepsSection steps={steps} />
            <CTASection />
            <AppFooter />
          </Content>
        </Layout>

        {/* 悬浮咨询按钮 */}
        <FloatConsultButton />
      </Layout>
    </ConfigProvider>
  );
};

// 主应用组件
const App: React.FC = () => {
  return (
    <ThemeProvider>
      <AppContent />
    </ThemeProvider>
  );
};

export default App;